<template>
  <div>
    <div>
      <div style="margin-bottom: 20px">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/' }" style="margin-left: 20px">首页</el-breadcrumb-item>
          <el-breadcrumb-item><a href="/">个人信息</a></el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <el-row :gutter="10" style="margin-bottom: 30px">
        <el-col :span="12">
          <el-card style="width: 500px;">
            <el-form :model="form" label-position="left">
              <div style="text-align: center;padding-bottom: 20px"><h1>个人信息</h1></div>
              <div style="text-align: center">
              </div>
              <el-form-item label="用户名" label-width="100px">
                <el-col :span="16">
                  <el-input v-model="form.username" autocomplete="off" :disabled="true"></el-input>
                </el-col>
              </el-form-item>
              <el-form-item label="密码" label-width="100px">
                <el-col :span="16">
                  <el-input v-model="form.password" autocomplete="off" @change="onChange">
                    <i
                        class="el-icon-edit el-input__icon"
                        slot="suffix"
                    >
                    </i>
                  </el-input>
                </el-col>
              </el-form-item>
              <el-form-item label="角色" label-width="100px">
                <el-col :span="16">
                  <el-input v-model="form.role" autocomplete="off" :disabled="true"></el-input>
                </el-col>
              </el-form-item>
              <el-form-item label="创建时间" label-width="100px">
                <el-col :span="16">
                  <el-input v-model="form.addtime" autocomplete="off" :disabled="true"></el-input>
                </el-col>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="save" :disabled="isClicked">确 定</el-button>
                <el-button type="success" @click="$router.push('/')">返回主页</el-button>
              </el-form-item>
            </el-form>
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card style="width: 500px;height: 380px">
            <div slot="header" class="clearfix">
              <span style="font-weight: bold;">社区文化</span>
              <el-button
                  style="float: right; padding: 3px 0"
                  type="text"
                  @click="clickFn"
              >暂停</el-button
              >
            </div>
            <div style="font-size: 18px;text-align: center; margin-top: 35px;font-weight: bold;">
              明日复明日
            </div>
            <div style="font-size: 18px;text-align: center;font-weight: bold;">明日何其多</div>
            <div style="font-size: 18px;text-align: center;font-weight: bold;">我生待明日</div>
            <div style="font-size: 18px;text-align: center;font-weight: bold;">万事成蹉跎</div>
            <div style="margin-top: 35px;"></div>
            <el-statistic
                ref="statistic"
                format="HH:mm:ss"
                :value="deadline4"
                title="今日剩余时间："
                time-indices
            >
            </el-statistic>
          </el-card>

        </el-col>
      </el-row>



    </div>




  </div>


</template>

<script>
import request from "@/utils/request";

export default {
  name: "Person",
  data(){
    return{
      form:{},
      user:localStorage.getItem("user")?JSON.parse(localStorage.getItem("user")):{},
      isClicked: true,
      deadline4: Date.now() + (new Date().setHours(23, 59, 59) - Date.now())
    }


  },
  created(){
this.request.get("/users/"+this.user.username).then(res=>{
if (res.code=="200"){
  this.form=res.data
}
})

  },
  methods:{
    clickFn() {
      this.$refs.statistic.suspend(this.stop);
      this.stop = !this.stop;
    },
    save(){
      request.post("users/update",this.form).then(res =>{
        if (res.code=="200"){
          this.$router.push("/login")
          this.$message.success("修改密码成功！请重新登录")
        }else {
          this.$message.error("修改客户失败")
        }
      })
    },
    onChange(){
      this.isClicked=false;
    }

  }


}
</script>

<style>


</style>